<template>
  <div>
    <el-row>
      <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="4">
        <el-select placeholder="请选择解析线路" size="small" v-model="line" @change="play">
          <el-option label="腾爱优乐芒果搜" value="https://z1.m1907.cn/?jx="></el-option>
          <el-option label="爱奇艺 优酷(第一源)" value="https://vip.parwix.com:4433/player/?url="></el-option>
          <el-option label="爱奇艺 优酷(第二源)" value="https://api.myzch.cn/?url="></el-option>
          <el-option label="B源)" value="https://www.cuan.la/m3u8.php?url="></el-option>
          <el-option label="全站" value="https://vip.bljiex.com/?v="></el-option>
        </el-select>
      </el-col>
      <el-col :xs="8" :sm="14" :md="14" :lg="15" :xl="14">
        <el-input @keyup.enter.native="SearchVideo" placeholder="输入搜索关键字" v-model="keyWord" size="small"></el-input>
      </el-col>
      <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
        <!-- <el-button type="primary" @click="play()" size="small">解析播放</el-button> -->
        <el-tag effect="dark" @click="SearchVideo()" style="cursor: pointer;">搜索</el-tag>
        <el-tag effect="dark" @click="drawer=true" style="cursor: pointer;">打开列表</el-tag>
      </el-col>
    </el-row>
    <el-drawer size="35%" :withHeader="false" title="视频搜索" :visible.sync="drawer" direction="rtl">
      <el-tabs type="border-card" v-model="activeTab" tab-position="top" style="height:100%">
        <el-tab-pane label="芒果TV" name="mgtv">
          <div class="paging_container">
            <ul class="paging_list">
              <li class="paging_box" style="display: flex;" v-for="(d,i) in mglist" :key="i">
                <div class="img"><img :src="d.data.pic"></div>
                <div class="box">
                  <h1 v-html="d.data.hitTitle"></h1>
                  <div class="text">
                    <template v-if="d.data.sourceList[0].videoList">
                      <el-tag class="num" size="medium" v-for="(list,index) in d.data.sourceList[0].videoList"
                        :key="index" @click="play(list.url.slice(2))">
                        {{list.title}}
                      </el-tag>
                    </template>
                    <template v-else>
                      <el-tag size="medium" @click="play(d.data.sourceList[0].url.slice(2))">
                        立即播放
                      </el-tag>
                    </template>
                  </div>
                </div>
              </li>
            </ul>
            <el-result icon="warning" title="暂无搜索结果" subTitle="你可以换个关键字再次搜索" v-if="mglist.length<1">
            </el-result>
          </div>
        </el-tab-pane>
        <el-tab-pane label="腾讯" name="qq">
          <div class="paging_container">
            <ul class="paging_list" v-if="qqlist.length>0">
              <li class="paging_box" style="display: flex;">
                <div class="img"><img src="d.data.pic"></div>
                <div class="box">
                  <h1><b>标题</b></h1>
                  <div class="text">
                    <el-tag class="num" v-for='(item,i) in qqlist' :key="i" @click="play(item.url)" size="medium">
                      {{item.name}}
                    </el-tag>
                  </div>
                </div>
              </li>
            </ul>
            <el-result icon="warning" title="暂无搜索结果" subTitle="你可以换个关键字再次搜索" v-if="qqlist.length<1">
            </el-result>
          </div>
        </el-tab-pane>
        <el-tab-pane label="优酷" name="youku">
          优酷
        </el-tab-pane>
        <el-tab-pane label="爱奇艺" name="iqiyi">
          爱奇艺
        </el-tab-pane>

      </el-tabs>
    </el-drawer>
  </div>
</template>

<script>
  import axios from 'axios'
  const cheerio = require('cheerio')
  export default {
    name: 'Search',
    data() {
      return {
        drawer: false,
        line: 'https://z1.m1907.cn/?jx=',
        videoSrc: '',
        keyWord: '',
        tablist: [],
        activeTab: 'mgtv',
        qqlist: [],
        mglist: []
      }
    },
    methods: {
      play(url) {
        if (url) {
          this.videoSrc = url
          this.$router.push({
            path: '/about',
            query: {
              lineSrc: this.line,
              couponId: this.videoSrc// this.videoSrc,
            },
          })
        }
      },
      SearchVideo() {
        if (this.keyWord != '') {
          this.SearchQQ()
          this.SearchMG()
          this.drawer = true
        } else {
          this.$message('请输入搜索关键字');
        }
      },
      SearchQQ() {
        axios({
          method: 'post',
          url: 'http://localhost:8081/qq/?q=' + this.keyWord, //请求的链接地址
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'text/plain',
          },
          params: {},
        })
          .then((resp) => {
            this.drawer = true
            this.qqlist = []
            const $ = cheerio.load(resp.data)
            var html = $('.result_episode_list .item')

            for (var num = 0; num <= html.length; num++) {
              var url = $(html[num]).children('a').attr('href');
              if (url.indexOf('http') != -1) {
                // var n=$(html[num]).children('a').html();
                this.qqlist.push({ 'url': url, 'name': $(html[num]).children('a').html() });
              }

            }
            // for(var i;i<$(html).length;i++){
            //   console.log(i)
            // }
            //如果成功将在这里进行后续的逻辑操作
          })
          .catch((err) => {
            //如果请求失败将在这里进行后续的逻辑操作
            console.log(err)
          })
      },
      SearchMG() {
        var _this = this;
        _this.mglist = []
        axios({
          method: 'get',
          url: `https://mobileso.bz.mgtv.com/pc/search/v1?q=${_this.keyWord}&callback=jsonp_${new Date().getTime()}_${parseInt(Math.random()*100000)}`
        }).then((res) => {
          var resdata = this.jsonpToJson(res.data);
          //data为集合 
          resdata.data.contents.forEach(function (item) {
            if (item.type == 'serial' || item.type == 'movie') {
              _this.mglist.push(item)
            }
          })
        });
      }, jsonpToJson(datas) {
        let jsonData = null
        // 下面是对获取到的数据进行处理，把jsonp格式的数据处理成json格式的数据
        if (typeof datas === 'string') {
          // 返回的是jsonp类型的数据，所以要用正则表达式来匹配截取json数据
          const reg = /^\w+\((\{[^()]+\})\)$/
          const matches = datas.match(reg)
          // matches匹配到的是数组，数组第一个是所有正则表达式匹配的字符串，第二个是第一个小括号匹配到的字符串
          if (matches) {
            jsonData = JSON.parse(matches[1])
          } else {
            jsonData = JSON.parse(datas.substring(datas.indexOf("(") + 1, datas.lastIndexOf(")")))
          }
        }
        return jsonData
      }

    },
  }
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .img img {
    display: block;
    height: 100%;
    width: 100%;
  }

  .img {
    overflow: hidden;
    width: 16%;
    height: 170px;
    margin-right: 20px
  }

  .paging_list li {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: dashed #ccc 1px;
    cursor: pointer;
  }

  .paging_container {
    overflow: auto;
    width: 100%;
  }

  .paging_container h1 {
    font-size: 18px;
    font-weight: 500;
    color: #262626;
  }

  .paging_container .time {
    font-size: 12px;
  }

  .paging_container .box {
    padding: 3px;
    width: 70%;
  }

  .paging_container .text {
    font-size: 14px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    color: #5e5e5e;
  }

  .num.el-tag {
    margin-right: 5px;
    width: 50px;
    margin-bottom: 5px;
    text-align: center;
    color: #000;
  }
</style>